import { View } from '@tarojs/components'
import './index.scss'
import IconFont from '../iconfont';
import React from 'react';
// {/* This is a component shows the scores in form of stars, a part of HotelCard componet. */}
interface StarsScoreProps {
  score: number,
  starSize?: number
}
const StarsScore: React.FC<StarsScoreProps> = ({ score, starSize }) => {
  const defaultSize = 32;
  // console.log(starSize)
  if (starSize == undefined || starSize == null) {
    starSize = defaultSize
  }
  return (
    <View className='stars-score-container'>
      <View className='back'>
        {[1, 2, 3, 4, 5].map(() => (
          <View className='star'>
            <IconFont name='star-filled' color="#aaa" size={starSize} />
          </View>
        ))}
      </View>
      <View className='front' style={{ width: starSize * score + "rpx", overflow: 'hidden' }}>
        {[1, 2, 3, 4, 5].map(() => (
          <View className='star'>
            <IconFont name='star-filled' color="yellow" size={starSize} />
          </View>
        ))}
      </View>
    </View>
  )
}
export default StarsScore;
